<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../assets/返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>{{typeTitle}}</span>
      </div>
      <div class="div">
        <span class="solid"></span>
      </div>
    </header>
    <ul>
      <li @click="wenZhenshi()" v-if="type !== 5">
        <img src="../../assets/问诊室.png" alt="">
        咨询室</li>
      <li @click="dingDan()">
        <img src="../../assets/订单管理.png" alt="">
        订单管理</li>
      <li @click="!team_id ? jiaGe() : ''" :style="{'background': (!team_id ? '' : '#FAF9FE')}">
        <img v-if="!team_id" src="../../assets/价格维护.png" alt="">
        {{ !team_id ? '价格维护' : '' }}
      </li>
      <li v-if="type == 5" style="background: #FAF9FE"></li>
    </ul>
  </div>
</template>

<script>
import {Toast} from 'vant'

export default {
  name: 'TuWenMiddlePage',
  data () {
    return {
      menuList: [
        {
          name: '咨询室'
        }, {
          name: '订单管理'
        }, {
          name: '价格维护'
        }
      ],
      userid: this.$route.query.userid,
      team_id: this.$route.query.team_id,
      type: Number(this.$route.query.type)
    }
  },
  mounted () {
    if (this.type == 1) {
      document.title = '图文咨询'
    } else if (this.type == 2) {
      document.title = '视频咨询'
    }
  },
  computed: {
    typeTitle: function () {
      if (this.type === 1) {
        document.title = '图文咨询'
        return '图文咨询'
      } else if (this.type === 2) {
        document.title = '视频咨询'
        return '视频咨询'
      } else if (this.type === 5) {
        document.title = '远程会诊'
        return '远程会诊'
      }
    }
  },
  methods: {
    wenZhenshi () {
      if (sessionStorage.getItem('sys') === 'ANDROID') {
        window.WebViewJavascriptBridge.callHandler('goToWenzhenRoom', this.type, function (responseData) {})
      } else {
        Toast('请在App上使用本功能')
      }
    },
    dingDan () {
      this.$router.push({path: '/docTuwenHome',
        query: {
          userid: this.userid,
          type: this.type,
          team_id: this.team_id
        }})
    },
    jiaGe () {
      this.$router.push({path: '/priceList',
        query: {
          userid: this.userid,
          type: this.type,
          team_id: this.team_id
        }})
      // Toast('正在开发中，敬请期待...')
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  overflow: auto;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #E5E5E5;
  background: white;
  position: sticky;
  top: 0;
  z-index: 5;
}
.div{
  width: 33%;
  height: 100%;
  display: flex;
  align-items: center;
  font-family: "PingFang SC";
  font-size: 15px;
  font-weight: bold;
}
.div img{
  margin-right: 5px;
}
.div:nth-child(1) img{
  height: 13px;
  width: 7px;
  margin-left: 15px;
}
.div:nth-child(3) img{
  width: 13px;
  height: 13px;
  margin-right: 5px;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.solid{
  color: #1DA4F2;
}
ul {
  width: 96%;
  display: flex;
  margin: 0 auto;
  justify-content: space-between;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-top: 8px;
}
ul li{
  width: 32%;
  height: 115px;
  background: #FFFFFF;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
ul li img{
  width: 60px;
  height: 58px;
}
</style>
